<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href="http://css.40017.cn/cn/min/??/cn/c/zt/2013/ztBase.css?v=13080902">-->
    <script type="text/javascript" src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102"></script>
    <style>
        .content{
            width: 1200px;
            margin:0 auto;
        }
        .comBox{
            height:400px;
        }
        #com1{
            background: red;
        }
        #com2{
            background: green;
        }
        #com3{
            background: yellow;
        }
        .con{
            position: relative;
            margin: 800px 0;;
        }
        .float_nav{
            width: 42px;
            position: absolute;
            top: 0;
            left: -50px;
            background: #fff;
        }
        .float_nav li {
            width: 28px;
            padding: 10px 6px 10px;
            display: block;
            border: 1px solid #ddd;
            border-bottom: 0;
        }
        .float_nav li a {
            font-size: 14px;
            color: #666;
        }

        .float_nav li.at{
            background: #50b400;
            width: 30px;
            border: 0;
        }

        .float_nav li.at a{
            color:#fff;
        }

        a:focus{outline:none;}

        .float_nav li.last{
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="con">
        <div class="comBox" id="com1" >

        </div>
        <div class="comBox com2" id="com2">

        </div>
        <div class="comBox com3" id="com3">

        </div>
        <div class="float_nav" id="float_nav">
            <ul>
                <li class="at" tar_box="com1">
                    <a href="#">我是红色</a>
                </li>
                <li class="com2" tar_box="com2">
                    <a href="#">我是绿色</a>
                </li>
                <li class="last"  tar_box="com3">
                    <a href="#">我是黄色</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script>
    //浮动导航切换
    var banTab = {
        clickScroll: function () {
            var aLink=fish.all("#float_nav li a");
            aLink.on("click",function(e){
                fish.preventDefault(e);
            });
            var aLi=fish.all("#float_nav li");
            aLi.on("click",function(){
                document.documentElement.scrollTop = document.body.scrollTop = fish.one("#"+fish.one(this).attr("tar_box")).offset().top;
            })
        },
        autoScroll: function () {
            fish.one(window).on("scroll",function(){
                var wT = document.documentElement.scrollTop || document.body.scrollTop;
                var oT = fish.one(".con").offset().top;
                var oL = fish.one(".con").offset().left;

                if(wT >= oT){
                    fish.one("#float_nav").css("position:fixed;top:0;left:"+(oL-50)+"px;");
                }else{
                    fish.one("#float_nav").css("position:absolute;top:0;left:-50px;");
                }

                var aComBox=fish.all(".comBox");
                var aLi=fish.all("#float_nav li");
                aComBox.each(function(elem,i){
//                    if(wT >= fish.one(elem).offset().top && wT < (fish.one(elem).offset().top + fish.one(elem).height())){
                    if(wT >= fish.one(elem).offset().top){
                        aLi.removeClass("at");
                        fish.one(aLi[i]).addClass("at");
                    }
                })
            })
        },
        init: function () {
            this.autoScroll();
            this.clickScroll();
        }
    };

    banTab.init();
</script>
</html>